<template>
	<div class="graduation-application">
		<el-main class="nopadding">
			<div class="basic-info item">
				<h3 class="title">学员基本信息</h3>
				<el-table :data="studentBasicData" style="width: 900px" border>
					<el-table-column
						align="center"
						label="学生姓名"
						prop="studentName"
					></el-table-column>
					<el-table-column
						align="center"
						label="性别"
						prop="sex"
					></el-table-column>
					<el-table-column
						align="center"
						label="身份证号"
						prop="idCard"
					></el-table-column>
					<el-table-column
						align="center"
						label="片区"
						prop="districtName"
					></el-table-column>
					<el-table-column
						align="center"
						label="校区"
						prop="schoolName"
					></el-table-column>
					<el-table-column
						align="center"
						label="电话"
						prop="phone"
					></el-table-column>
				</el-table>
			</div>
			<div class="associated-course item">
				<h3 class="title">课程情况</h3>
				<el-table :data="unGraduationCourseData" border>
					<el-table-column
						align="center"
						type="index"
						:index="indexMethod"
					></el-table-column>
					<el-table-column align="center" label="未毕业课程详情">
						<el-table-column
							align="center"
							label="课程名称"
							prop="courseName"
						></el-table-column>
						<el-table-column align="center" label="学习时间">
							<el-table-column
								align="center"
								label="开始"
								prop="openingTime"
							></el-table-column>
							<el-table-column
								align="center"
								label="结束"
								prop="classEnding"
							></el-table-column>
						</el-table-column>
					</el-table-column>
				</el-table>
				<br />
				<el-table :data="graduationCourseData" border>
					<el-table-column
						align="center"
						type="index"
						:index="indexMethod"
					></el-table-column>
					<el-table-column align="center" label="已毕业课程详情">
						<el-table-column
							align="center"
							label="课程名称"
							prop="courseName"
						></el-table-column>
						<el-table-column align="center" label="学习时间">
							<el-table-column
								align="center"
								label="开始"
								prop="openingTime"
							></el-table-column>
							<el-table-column
								align="center"
								label="结束"
								prop="classEnding"
							></el-table-column>
						</el-table-column>
						<el-table-column
							align="center"
							label="操作"
							#default="{ row }"
						>
							<el-button
								type="primary"
								@click="graduationApplicate(row)"
								>毕业申请</el-button
							>
						</el-table-column>
					</el-table-column>
				</el-table>
			</div>
		</el-main>
		<GraduateDialog ref="graduateRefs" />
	</div>
</template>

<script>
import { Close, Document } from "@element-plus/icons-vue";
import GraduationWorkPreview from "./components/graduation-work-preview.vue";
import GraduateDialog from "./components/GraduateDialog.vue";
import { ElMessage } from "element-plus";
import useTabs from "@/utils/useTabs";

export default {
	components: {
		Close,
		Document,
		GraduationWorkPreview,
		GraduateDialog,
	},
	props: {
		studentId: {
			type: [String, Number],
			default: "",
		},
	},
	data() {
		return {
			studentBasicData: [{ studentName: "我是虚拟数据·张三" }],
			applicationData: [{ courseName: "虚拟数据-课程名称" }],
			unGraduationCourseData: [],
			graduationCourseData: [{ courseName: "虚拟数据-课程名称" }],
			isApplicate: false,
		};
	},
	methods: {
		getFindDetail() {
			let data = `studentId=${parseInt(this.$route.params.id)}`;
			this.$API.student.findDetail.post(data).then((res) => {
				console.log(res);
				if (res.code == 200) {
					const name = res.data.student.studentName;
					useTabs.setTitle(name + "-申请毕业详情");
					this.unGraduationCourseData = res.data.incompleteClass;
					this.graduationCourseData = res.data.completeClass;
					this.studentBasicData = [res.data.student];
				} else {
					ElMessage({
						message: res.message,
						type: "warning",
					});
				}
			});
		},

		indexMethod(index) {
			return index + 1;
		},
		graduationApplicate(row) {
			let obj = {
				...row,
				studentName: this.studentBasicData[0].studentName,
			};
			this.$refs.graduateRefs.openDialog(obj);
		},
	},
	mounted() {
		this.getFindDetail();
	},
};
</script>

<style lang="scss" scoped>
.graduation-application {
	height: 100%;
	.el-main {
		height: 100%;
	}
	padding: 15px;
	background-color: #fff;
	.item {
		padding-bottom: 30px;
		.title {
			font-size: 20px;
			padding-bottom: 10px;
			color: #333;
		}
	}
	.graduation-work {
		.wrap {
			display: flex;
			.graduation-work-left {
				border: 1px solid #333;
				width: 800px;
				height: 200px;
				overflow-y: auto;
				.file-item {
					display: flex;
					flex: 1;
					padding: 5px 20px;
					height: 30px;
					justify-content: space-between;
					.file-name {
						display: flex;
						align-items: center;
						.text {
							padding-left: 5px;
						}
					}
					&:hover {
						background-color: #f5f7fa;
						cursor: pointer;
						color: #409eff;
					}
				}
			}
			.graduation-work-right {
				display: flex;
				flex-direction: column;
				margin-left: 40px;
				.el-button {
					margin-left: 0px;
					margin-bottom: 10px;
				}
			}
		}
	}
	.opt {
		padding-left: 200px;
		display: flex;
	}
	.bottom {
		padding-top: 20px;
	}
}
</style>
